<template>
	<view class="content"> 
		<view class="head_nav" >
			<!-- style="background-image: url('@/static/picture/indexbg.png')" -->
			<!-- <image style="width: 100%;position: absolute; z-index:1;" src="@/static/picture/indexbg.png" mode="widthFix"></image> -->
			<!-- #ifdef MP-WEIXIN -->
			<!-- <view :style="{height: `${statusBarHeight}px`}"></view> -->
			<!-- #endif --> 
			<!-- <view class="navbar"  :style="{height: `${titleBarHeight}px`}" @click="openPicker">
				<view class="address"  :style="{height: `${titleBarHeight}px` }"> 
					<image src="@/static/picture/address.png" mode="widthFix"></image>
					<view class="city">{{pickers}}</view>
					<image  style="width: 16rpx;height: 10rpx;" src="@/static/picture/down.png" mode="widthFix"></image> 
				</view>
				<view class="ft40" :style="{lineHeight: `${titleBarHeight}px` }">浴悦到家</view>
			</view> -->
			<!-- <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker> -->
			<uv-swiper :list="banner" keyName="imgKey" height='231'  indicator indicatorMode="line" circular  radius="0"
			:indicatorStyle="{bottom:'60rpx'}"></uv-swiper> 
			
			<view class="allview" >
				<view class="title fx-row-sta">
					<view  class="bar"></view>  
					<span >全部项目</span>
				</view>
				<view class="fx-col mt22">
					<view class="list_items fx-row mb20" v-for="(item,index) in project" :key="item.id" @click="goProject(item.id)">
						<view class="picture mr26">
							<image :src="item.cover" mode="heightFix" lazy-load></image> 
						</view>
						<view class="fx-col-sb" >  
							<view class="text-beyond ft32" style="width: 300rpx;font-weight: bold;">{{item.name}}</view>
							<view class="mt16 ft24 grey1 text-beyond" style="width: 260rpx;">{{item.recommend}}</view> 
							<view class="mt20">
								<span class="mr4 ft40 red"><span class="ft24">￥</span>{{integer(item.discountPrice)}}</span>
								<span class="ft24 grey1" style="text-decoration:line-through"><span>￥</span>{{integer(item.price)}} </span>
							</view> 
							<view class="ft18 grey1 text-beyond" style="width: 260rpx;margin-bottom: 12rpx;">超{{item.selectCount}}人选择</view>  
							<view class="item_float_time fx-row-sta">
								<image class="img_tip" src="@/static/picture/home_time.png" mode="widthFix" lazy-load></image>
								<span class="ft24">{{item.duration}}分钟</span>
							</view>
							<view class="item_btn" @click.stop="projectSelect(item.id)">预约</view>
						</view>
					</view>  
				</view>
				 <uv-load-more :status="isLoading" fontSize='12' color='#696969' nomoreText=' '/>
			</view>
		</view>
		<!-- 售后电话 --> 
		<!-- #ifdef MP-WEIXIN -->
		<view class="phone fx-col-c-c" @click="callphone">
			<image src="@/static/picture/tel.png" mode="widthFix" lazy-load></image> 
		</view> 
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<a  class="phone fx-col-c-c" :href='phones' >
			<image src="@/static/picture/tel.png" mode="widthFix" lazy-load></image> 
		</a>
		<!-- #endif --> 
		<!-- <view style="width: 100%;height:var(--window-bottom);"></view> -->
	</view>
</template>

<script>
	import {projectList,bannerList,geturl,cityAll} from '@/utils/api.js'  
	import badgeMix from '@/common/mixins.js'
	import {  mapActions } from 'vuex'  
	import config from '@/config.js' 
	export default {
		mixins: [badgeMix],
		data() {
			return {
				titleBarHeight:this.titleBarHeight,
				statusBarHeight:this.statusBarHeight,
				allBarHeight:this.allBarHeight, 
				banner: [ ],
				project:[],
				isLoading:'nomore',  //是否加载中
				pageNum:1,//请求的页码
				pageSize:10,//请求的条数 
				phone:'',
				phones: '',
				columns: [
					['太原市',]
				],
				pickers:'请选择',
				num:'0',
				IsDevelop:this.IsDevelop
			}
		},
		async onShow() { 
			// if(!uni.getStorageSync('longitude') && !uni.getStorageSync('latitude')){
			 	// await this.getLocation()  //获取定位 
			// }  
			// #ifdef H5 
			// #endif  
		},
		async onLoad() {    
			console.log(uni.getStorageSync('OPENID'),"公众号openid");
			this.project = []
			this.pageNum = 1   
			await this.getList()    //项目列表
			await this.getBanner()   //轮播图   
			this.phones = 'tel:' + config.appInfo.phones   
			// #ifdef H5
			await this.$u.init()
			await this.$u.share()
			// #endif 
			// #ifdef MP-WEIXIN
			
			// #endif 
			 // await this.getCity()
		}, 
		methods: {    
			...mapActions(['openId']),    
			// 获取轮播图
			getBanner(){
				bannerList().then((res) => {   
					if(res.code == '200'){ 
						this.banner = res.result
					}
				}) 
			},
			// 获取当前定位
			async getLocation(){ 
				var _this = this  
					// #ifdef H5  
					uni.getLocation({
						type: 'gcj02',
						isHighAccuracy: true, //开启高精度定位默认false
						success: async function(res) { 
							uni.setStorageSync('longitude',res.longitude)
							uni.setStorageSync('latitude',res.latitude)  
							await _this.getCurrentCity() 
							await _this.getCity() 
						},
						fail: (err) => { 
							_this.getCurrentCity() 
							_this.getCity() 
						}
					});  
					// #endif
					
					// #ifdef MP-WEIXIN
					console.log("小程序获取定位");
					uni.authorize({
						scope: 'scope.userFuzzyLocation',
						success: () => {// 允许授权 
							this.getLocationInfo();
						},
						fail: () => {// 拒绝授权 
							this.openConfirm();
						}
					}) 
					
					// #endif 
			},
			// 小程序获取授权
			 getLocationInfo(){
				 var _this = this;
				 uni.getFuzzyLocation({
				 	type: 'wgs84', 
				 	success: function (res) {  
						uni.setStorageSync('longitude',res.longitude)
						uni.setStorageSync('latitude',res.latitude) 
						_this.getCurrentCity()
						_this.getCity() 
				 	},
				 	fail: (info) => {
						_this.openConfirm()
				 	} 
				 });
			 },
		 openConfirm(){
			 	uni.showModal({
			 			title: '请求授权当前位置',
			 			content: '需要获取您的地理位置，请确认授权',
			 			success: (res)=> {
			 			if (res.confirm) {
			 				uni.openSetting();// 打开地图权限设置
			 			} else if (res.cancel) {
			 					uni.showToast({
			 					title: '你拒绝了授权，无法获得周边的技师信息',
			 					icon: 'none',
			 					duration: 1000
			 					})
								_this.getCurrentCity()
								_this.getCity() 
			 				}
			 			}
			 	});
			 }, 
			openPicker() {
				this.$refs.picker.open();
			},
			confirm(e) {
				console.log('confirm', e.value[0]);
				this.pickers = e.value[0]
			},
			// 24小时客服电话
			callphone:function(){
				uni.makePhoneCall({
				    phoneNumber: config.appInfo.phones  
				});
			},
			// 项目列表
			getList(){ 
				this.isLoading = 'loading'
				const  datas = {
					"current": this.pageNum,  //页码
					"size": this.pageSize,   //条数
					// #ifdef MP-WEIXIN
					"source" : 'WeChatMini',
					"version" : config.appInfo.version
					// #endif  
				} 
				projectList(datas).then((res) => {
					console.log(res,'项目列表');  
					if(res.code == '200'){ 
						const data = res.result.records  
						this.project = [...this.project,...data]
						if(data.length < this.pageSize){
							this.isLoading = 'nomore'
						}
						console.log(this.project,'项目书局');
					}
				}) 
			},
			// 跳转项目详情
			goProject(id){
				uni.navigateTo({
					url:'/pages/index/details?id='+id
				})
			},
			// 技师  项目分类
			projectSelect(id){
				// 项目分类列表
				// uni.navigateTo({
				// 	url: '/pages/technician/projectList?state=1&id='+ id,  
				// }) 
				uni.switchTab({
					url:'/pages/technician/index'
				})
			}
		}, 
　　// 上拉刷新
　　onReachBottom() {  
			//如果最后一次请求，数据为空的话就停止请求，防止多次触发接口
			if(this.isLoading=='nomore'){
				return;
			}
			this.pageNum++ 
			this.getList()
		}, 
		onPullDownRefresh() {  
			this.project = []
			this.pageNum = 1   
			this.getList() 
			setTimeout(function () { 
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style  lang="scss">
	.uv-swiper__wrapper__item__wrapper__image{
		border-radius: 0 !important;
	}
	.content {
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;
		
	}
	.head_nav{ 
		width: 750rpx;	
		// height: 590rpx; 
		// background-size:  100% auto;
		// background-color: #54DADE;
		// padding-bottom: var(--window-bottom);
		.navbar{
			position: relative;
			text-align: center;
			font-size: 40rpx;
			color: #fff;
			z-index: 3;
			.address{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				position: absolute;   
				/*  #ifdef  H5  */
				margin: 0 32rpx; 
				/*  #endif  */
				/*  #ifdef  MP-WEIXIN  */
				margin: 0 32rpx; 
				/*  #endif  */ 
				font-size: 26rpx;
				image{
					width: 20rpx;
				}
				.city{
					margin: 0 6rpx;
				}
			} 
			
		}
		.uv-swiper{
			position: relative; 
			z-index: 3;
			width: 750rpx;
			margin: 0 auto;
		} 
		.allview{
			position: relative;
			width: 690rpx;
			padding: 20rpx 30rpx 0 30rpx; 
			margin-top: -30rpx;
			// padding-bottom: var(--window-bottom);
			/*  #ifdef  MP-WEIXIN  */
			// margin-top:calc(var(--status-bar-height)) ;
			/*  #endif  */
			/*  #ifdef  H5  */
			// margin-top:calc(var(--status-bar-height)) ;
			/*  #endif  */
			background-color: #fff;
			border-radius:30rpx 30rpx 0 0;
			z-index: 991;
			.title{
				position: relative;
				margin-top: 14rpx;
				text-indent: 20rpx;
				font-size: 34rpx;
				font-weight: bold;
				.bar{
					width: 8rpx;
					height: 20rpx;
					background-color: $uni-main;
				}
				&::after{ 
					// content: ''; 
					// position: absolute;
					// left: 0;
					// top: 20rpx;
					// width: 10rpx;
					// height: 20rpx; 
					// margin: auto;
					// background-color: #FFA800;
				}
			}
			.list_items{
				position: relative;
				width:650rpx;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 12rpx;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.1);
				.picture{
					width: 216rpx;
					height: 212rpx;
					border-radius: 16rpx;
					overflow: hidden;
					image{
						height: 100%;
					}
				} 
				.img_tip{
					width: 22rpx;
					height: 22rpx;
					margin-right: 8rpx;
				}
				.item_float{
					position: absolute;
					right: 20rpx; 
				}
				.item_float_time{
					position: absolute;
					top: 20rpx;
					right: 32rpx; 
				}
				.item_btn{	
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					width: 156rpx;
					height: 52rpx; 
					background-color: $uni-main;
					border-radius: 30rpx;
					text-align: center;
					line-height: 52rpx;
					font-size: 24rpx;
					color: #fff;
				}
			}
		}
	}
	.phone{
		position: fixed;
		right: 20rpx;
		bottom: 300rpx;
		width: 100rpx;
		height: 100rpx;
		background-color:#fff;
		border-radius: 50%;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.14);
		z-index: 991;
		image{
			width: 52rpx;
		}
	}
</style>
